
import React, { memo, useCallback, useState } from 'react'
import WorkModel from '@models/workModel'
// @ts-ignore
import Styles from './index.scss'
// @ts-ignore
import InfoIcon from '../../../icons/info.svg'
import { Card, WingBlank, WhiteSpace, Toast, Modal } from 'antd-mobile';
import WImage from '@components/global/image'

interface PropsInterface {
  models: WorkModel[],
  show: string
}
// @ts-ignore
const Work = (props: PropsInterface) => {

  const [visible, setVisible] = useState(false)
  const [popModel, setPopModel] = useState<WorkModel>(new WorkModel())

  const itemClick = useCallback((item: WorkModel) => {
    if (item.url) {
      window.open(item.url)
    } {
      Toast.info('链接无效')
    }
  }, [])

  const infoClick = useCallback((e, item) => {
    e.stopPropagation();
    setPopModel(item)
    setVisible(true)
  }, [])

  return (
    <WingBlank size="sm" className={Styles['com-me-study']}>
      <Card>
        <Card.Header
          title={<span className={Styles['title']}>工作经历</span>}
        />
        <Card.Body>
          <div className={Styles['detail-text']}>{props.show}</div>
          <WhiteSpace />
          <div className={Styles['list']}>
            {
              props.models.map((item) => {
                return (
                  <WImage
                    key={item._id}
                    onClick={() => itemClick(item)}
                    className={Styles['item']}
                    url={item.icon}
                    width={175}
                    height={175}>
                    <InfoIcon onClick={(e: any) => infoClick(e, item)} className={Styles['info-icon']} />
                  </WImage>
                )
              })
            }
          </div>
        </Card.Body>
      </Card>
      <Modal
        visible={visible}
        onClose={() => setVisible(false)}
        popup
      >
        <WingBlank className={Styles['jineng-list']}>
          <WhiteSpace />
          <h2 className={ Styles['pop-show'] }>{ popModel.name }</h2>
          <p className={ Styles['pop-show'] }>{ popModel.obligation }</p>
          <p className={ Styles['pop-show'] }>{ popModel.detail }</p>
          <WhiteSpace />
        </WingBlank>
      </Modal>
    </WingBlank>
  )
}

export default memo(Work)